<template>
<div class="layout">
    <Topnav class="nav" :toggleMenuButtonVisible="true" />
    <div class="content">
        <aside v-if="asideVisible">
            <!--<div class="text-list">-->
            <h2>入门</h2>
            <ol>
                <li>
                    <router-link to="/Doc/Intro">介绍</router-link>
                </li>
                <li>
                    <router-link to="/Doc/Install">使用指南</router-link>
                </li>
            </ol>
            <h2 @click="togglelist">组件</h2>
            <ol v-if="listVisible">
                <li>
                    <router-link to="/Doc/Switch">Switch 开关</router-link>
                </li>
                <li>
                    <router-link to="/Doc/Button">Button 按钮</router-link>
                </li>
                <li>
                    <router-link to="/Doc/Dialog">Dialog 对话框</router-link>
                </li>
                <li>
                    <router-link to="/Doc/Tabs">Tabs 标签页</router-link>
                </li>
            </ol>
            <!--</div>-->

        </aside>
        <main>
            <router-view />
        </main>

    </div>
</div>
</template>

<script lang="ts">
import Topnav from '../components/Topnav.vue';
import Footer from '../components/footer.vue';
import {
    Ref,
    inject,
    ref
} from 'vue';
export default {
    components: {
        Topnav,
        Footer
    },
    setup() {
        const asideVisible = inject < Ref < Boolean >> ('nav'); //get,利用泛型来指代传值为何种类型
        const listVisible = ref(false);
        //console.log("Doc获取到app.vue的显示变量为" + asideVisible.value);
        const togglelist = () => {
            listVisible.value = !listVisible.value;
            console.log(listVisible);
        }
        return {
            togglelist,
            asideVisible,
            listVisible
        };
    }
}
</script>

<style lang="scss" scoped>
.layout {
    display: flex;
    flex-direction: column;
    height: 100vh;

    >.nav {
        flex-shrink: 0;
        //z-index: 11;
    }

    >.content {
        flex-grow: 1;
        padding-top: 70px;
        padding-left: 156px;

        @media (max-width: 500px) {
            padding-left: 0;
        }
    }
}

.content {
    display: flex;

    >aside {
        flex-shrink: 0;
    }

    >main {
        flex-grow: 1;
        padding: 16px;
        background: white;
        border-top: 1px solid fade-out(black, 0.9);

    }
}

aside {
    color: white;
    //text-shadow: grey 1px 1px 1px;
    background: #8950fc;
    width: 150px;
    //0使得高亮区域可以填充满整个li标签
    padding: 16px 0;
    position: fixed;
    top: 0;
    left: 0;
    padding-top: 70px;
    height: 100%;
    transition: 250ms;
    //移动端让导航条在最高层以防看得见组件
    z-index: 10;

    >h2 {
        //为了与上面不脱节，且左右适中
        padding: 0 16px;
        margin-bottom: 8px;
    }

    >ol {
        >li {
            a {
                padding: 4px 16px;
                text-decoration: none;
                display: block;
            }

            .router-link-active {
                background-color: white;
                color: black;
            }

            &:last-of-type {
                margin-bottom: 16px;
            }
        }
    }

}

// aside h2:not(last-of-type) {
//     margin-bottom: 15px;
// }

main {
    overflow: auto;
}

// @media(max-width: 500px){
//   > .aside{
//     position: fixed;
//     top: 0;
//     left: 0;
//     width: 150px;
//   }
// }
</style>
